html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

body {
  display: flex;
  flex-direction: column;
}

.tr-brand {
  background-color: #337AB7;
  font-size: 36px;
  padding-left: 25px;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.dropdown-menu .dropdown-menu {
  top: auto;
  left: -360px;
  width: 360px;
  margin: -40px 0px 0px 0px;
  /*transform: translateY(-2rem);*/
}

.dropdown-item.submenu::after {
  content: '▸';
  float: right;
}

.dropdown-item:hover + .dropdown-menu,
.dropdown-menu:hover {
  display: block;
}

.no-quill-border > div > div {
  border: 0px !important;
}

.ul-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.quill-min-height-50 > div > div > div {
  min-height: 25px;
}

.w-150 {
  width: 150px;
}

.w-200 {
  width: 200px;
}

.w-250 {
  width: 250px;
}

.w-300 {
  width: 300px;
}

.w-350 {
  width: 350px;
}

.w-400 {
  width: 400px;
}

.w-500 {
  width: 500px;
}

.w-600 {
  width: 600px;
}

.w-700 {
  width: 700px;
}

.selected-row {
  background-color: #d9edf7 !important;
}

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.nowrap {
  white-space: nowrap;
}

.clip {
  text-overflow: clip;
  overflow: hidden;
}

.check-column {
  width: 20px;
}

.header-menu {
  opacity: 0.7;
}

.info-url {
  min-height: 80px;
  text-align: left;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.btn-panel {
  width: 40px !important;
}

.btn-xs {
  min-width: 60px;
  margin: .25rem;
}

.btn-s {
  min-width: 80px;
  margin: .25rem;
}

.btn-l {
  min-width: 200px;
  margin-left: .5rem;
  margin-right: .5rem;
}

.btn-xl {
  min-width: 240px;
  margin-left: .5rem;
  margin-right: .5rem;
}

.min-w-250 {
  min-width: 250px !important;
}

.mw-200 {
  max-width: 200px !important;
}

.mw-80 {
  max-width: 80% !important;
}

.mh-250 {
  max-height: 250px;
}

.mh-500 {
  max-height: 500px;
}

.mh-750 {
  max-height: 750px;
}

.h-250 {
  height: 250px;
}

.h-500 {
  height: 500px;
}

.h-650 {
  height: 650px;
}

.h-700 {
  height: 700px;
}

.modal-menu-long {
  max-width: 1285px;
}

.modal-menu-short {
  max-width: 885px;
}

.modal-body-500-restrict {
  height: 500px;
}

.cursor-pointer {
  cursor: pointer;
}

ul.nav.nav-tabs > li.nav-item > a.nav-link {
  cursor: pointer;
}

.form-enter-data-title {
  background-color: #76b6ec;
  color: #fff;
  padding: .5rem 1.5rem;
  width: 200px;
}

.form-extra-data {
  color: #337ab7 !important;
  cursor: pointer
}

.far .fas {
  margin-right: 8px;
}

.gap-s {
  gap: 0.25rem;
}

.gap-m {
  gap: 0.5rem;
}

.gap-l {
  gap: 1rem;
}

.f-grow {
  flex: 1;
  min-height: 0px;
}

.text-font-size-8 {
  font-size: 8pt;
}

.text-font-size-10 {
  font-size: 10pt;
}

.text-font-size-12 {
  font-size: 12pt;
}

.text-font-size-14 {
  font-size: 14pt;
}

.text-font-size-16 {
  font-size: 16pt;
}

.text-font-size-18 {
  font-size: 18pt;
}

.text-font-size-20 {
  font-size: 20pt;
}

.text-font-size-22 {
  font-size: 22pt;
}

textarea {
  resize: none;
  overflow-x: hidden;
}

.liccolormenu {
  border: 1px solid #8e44ad;
}

.liccolormenu > header {
  background-color: #8e44ad;
}

.liccolormenu > header > span {
  color: #fff;
}

.liccolormenu > div > div > div > button {
  background-color: #8e44ad;
  color: #fff;
}

.taskcolormenu {
  border: 1px solid #f39c12;
}

.taskcolormenu > header {
  background-color: #f39c12;
}

.taskcolormenu > header > span {
  color: #fff;
}

.taskcolormenu > div > div > div > button {
  background-color: #f39c12;
  color: #fff;
}

.asrcolormenu {
  border: 1px solid #ec407a;
}

.asrcolormenu > header {
  background-color: #ec407a;
}

.asrcolormenu > header > span {
  color: #fff;
}

.asrcolormenu > div > div > div > button {
  background-color: #ec407a;
  color: #fff;
}


.sessioncolormenu {
  border: 1px solid #16a085;
}

.sessioncolormenu > header {
  background-color: #16a085;
}

.sessioncolormenu > header > span {
  color: #fff;
}

.sessioncolormenu > div > div > div > button {
  background-color: #16a085;
  color: #fff;
}

.importcolormenu {
  border: 1px solid #729b79;
}

.importcolormenu > header {
  background-color: #729b79;
}

.importcolormenu > header > span {
  color: #fff;
}

.importcolormenu > div > div > div > button {
  background-color: #729b79;
  color: #fff;
}

.protcolormenu {
  border: 1px solid #16a085;
}

.protcolormenu > header {
  background-color: #16a085;
}

.protcolormenu > header > span {
  color: #fff;
}

.protcolormenu > div > div > div > button {
  background-color: #16a085;
  color: #fff;
}


.authcolormenu {
  border: 1px solid #e77755;
}

.authcolormenu > header {
  background-color: #e77755;
}

.authcolormenu > header > span {
  color: #fff;
}

.authcolormenu > div > div > div > button {
  background-color: #e77755;
  color: #fff;
}

.reccolormenu {
  border: 1px solid #5BC0DE;
}

.reccolormenu > header {
  background-color: #5BC0DE;
}

.reccolormenu > header > span {
  color: #fff;
}

.reccolormenu > div > div > div > button {
  background-color: #5BC0DE;
  color: #fff;
}

.mainmenu {
  display: inline-block;
  width: 370px;
  height: auto;
  margin-left: 0px;
  margin-right: 30px;
  margin-top: 20px;
  vertical-align: top;
}

.mainmenu-min-height {
  min-height: 230px;
}

.headermenu {
  display: inline-block;
  width: 330px;
  height: auto;
  margin-left: 0px;
  margin-right: 20px;
  margin-top: 20px;
}

.storcolormenu {
  border: 1px solid #34495E;
}

.storcolormenu > header {
  background-color: #34495E;
}

.storcolormenu > header > span {
  color: #fff;
}

.storcolormenu > div > div > div > button {
  background-color: #34495E;
  color: #fff;
}

.stenocolormenu {
  border: 1px solid #6c757d;
}

.stenocolormenu > header {
  background-color: #6c757d;
}

.stenocolormenu > header > span {
  color: #fff;
}

.stenocolormenu > div > div > div > button {
  background-color: #6c757d;
  color: #fff;
}

.loader {
  border: 4px solid #f3f3f3; /* Light grey */
  border-top: 4px solid #3498db; /* Blue */
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
}

.loader.loader-sm {
  width: 28px;
  height: 28px;
}

.loader.loader-xs {
  width: 18px;
  height: 18px;
}

.loader.loader-lg {
  width: 64px;
  height: 64px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.menuBtnContainer {
  display: flex;
  flex-wrap: wrap;
  margin: 0px;
}

.menuBtnContainer-min-height {
  min-height: 100px;
}

.menuBtnBox {
  flex-grow: 1;
  margin: 5px;
}

.popup .popuptext > div:hover {
  background-color: #ddd;
}

/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 0px;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 100%;
  background-color: rgba(85, 85, 85, 0.6);
  color: #fff;
  /*text-align: center;*/
  border-radius: 6px;
  padding: 8px;
  /*position: absolute;*/
  z-index: 1;
  /*bottom: -125%;
left: 50%;
margin-left: -80px;*/
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  /*border-style: solid;*/
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

.m-fade.ng-hide {
  visibility: hidden;
}

.m-fade {
  opacity: 1;
  visibility: visible;
  animation: fadeIn 1s linear;
  -webkit-animation: fadeIn 1s linear;
}

.zoomin {
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  /*-moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;*/
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (min-width: 1280px) {
  .search-compact {
    display: none !important;
  }

  .btn-m {
    min-width: 140px;
    margin-left: .5rem;
    margin-right: .5rem;
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  .modal-menu-long {
    max-width: 885px;
  }

  .search-compact {
    display: none !important;
  }

  .btn-m {
    min-width: 130px;
    margin-left: .5rem;
    margin-right: .5rem;
  }

  .col, [class*="col-"] {
    padding-right: 10px;
    padding-left: 10px;
  }

  .hide-on-middle {
    display: none;
  }

  .mainmenu {
    margin-right: 20px;
    margin-top: 10px;
  }
}

@media (min-width: 0px) and (max-width: 768px) {
  .mainmenu {
    margin-right: 10px;
    margin-top: 5px;
  }

  .search-full {
    display: none !important;
  }

  .hide-on-middle {
    display: none;
  }

  .hide-on-small {
    display: none;
  }

  .btn-m {
    min-width: 120px;
    margin-left: .5rem;
    margin-right: .5rem;
  }

  .col, [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
  }
}

.search-filter-value {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 20px;
  background-color: #e0e0e0;
  padding: .25em;
  margin: .25em;
}

.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.c-pointer {
  cursor: pointer;
}

/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops

@media (min-width: 1281px) {
}

  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px

@media (min-width: 1025px) and (max-width: 1280px) {
}

  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px

@media (min-width: 768px) and (max-width: 1024px) {
}

  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px

@media (min-width: 768px) and (max-width: 1280px) and (orientation: landscape) {
}

  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px

@media (min-width: 481px) and (max-width: 767px) {
}

  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px

@media (min-width: 320px) and (max-width: 767px) {
}

*/

.ngdialog{
  z-index: 1000!important;
}

.ngdialog.ngdialog-theme-default .ngdialog-content {
  padding: 0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

.ngdialog.ngdialog-theme-default {
  padding-top: 80px;
  padding-bottom: 0;
}